<!DOCTYPE html>
<html lang="en">
    <head>  
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件的委派</title>
        <script type="text/javascript">
            window.onload = function(){
                /*
                 为所有的超链接绑定单击响应函数
                var allA = document.getElementsByTagName("a");
                for(var i=0; i<allA.length; i++){
                    allA[i].onclick = function(){
                        alert("我是a的单机响应函数");
                    };
                } 
                这种for循环的方式为每一个超链接都绑定单击响应函数比较麻烦，
                而且只能为已有的超链接绑定事件，而新增的超链接还需重新绑定，
                所以不推荐用这种方式绑定事件，事件的委派就可以解决这类问题。
                */

                /*
                我们希望只绑定一次，即可应用到多个元素上(即使元素是新增的),
                可以尝试将事件绑定给这些元素共同的祖先元素，
                因为冒泡的缘故，点击超链接会触发其祖先元素ul的单击事件；

                事件的委派：指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件
                           被触发时会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
                （事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能）           
                 */

                //为ul绑定单击响应函数
                var u1 = document.getElementById("u1");
                u1.onclick = function(event){
                    event = event || window.event;
                /***** target：event中的target属性表示触发事件的对象 *****/    
                //如果触发事件的对象是期望的元素则执行，否则不执行
                    if(event.target.className == "link")
                        alert("我的ul的单击响应函数");
                };
                
                //为btn绑定单击事件
                var btn = document.getElementById("btn");
                btn.onclick = function(){
                    //创建新的li和超链接
                    var li = document.createElement("li");
                    li.innerHTML = "<a href='javascript:;' class='link'>新增超链接</a>";
                    u1.appendChild(li);
                };
            };

        </script>
    </head>
    <body>
        <button id="btn">点击增加超链接</button>
        <ul id="u1">
            <li><a href="javascript:;" class="link">超链接1</a></li>
            <li><a href="javascript:;" class="link">超链接2</a></li>
            <li><a href="javascript:;" class="link">超链接3</a></li>
            <li><a href="javascript:;" class="link">超链接4</a></li>
        </ul>
    </body>
</html>